// 自定义hook函数
// 问题：布尔切换逻辑 当前组件耦合在一起 不方便使用

// 解决：自定义hook

import { useState } from "react"

function useToggle () {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)
  const toggle = () => {
    setValue(!value)
  }
  // 哪些状态和回调函数需要在其他组件中使用 return
  return {
    value,
    toggle
  }
}

// 封装hook通用思路

// 1.申明一个use打头的函数
// 2.在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3.要把组件中用到的状态或者回调 return出去 （以一个对象或者数组）
// 4.在组件中用到这个逻辑，就执行这个函数，解构出来状态和回调

function App () {
  const { value, toggle } = useToggle()
  return (
    <div>
      {value && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

export default App
